<template>
	<view class="evaluate_box">
		<!-- 导航 -->
		<view class="navbar_box">
			<scroll-view scroll-x="true" class="kite-classify-scroll">
				<view v-for="(item,index) in navList" :key="index" class="item"
					:style="{color:active == index?'#FFFFFF':'#999999', background:active == index?'#73F0EA':'#F6F6F6'}"
					@click="changeActive(item, index)">
					{{item}}
				</view>
				<view class="empty-box">
				</view>
			</scroll-view>
		</view>
		<!-- 列表 -->
		<scroll-view scroll-y="true" style="height: 90vh;" @scrolltolower="scrolltolower">
			<view class="comlum_box" v-if="evaluate.length">
				<view v-for="(item,index) in evaluate" :key="index" class="itemY">
					<boxComponent>
						<evaluateVue :query="item"></evaluateVue>
					</boxComponent>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="'评价'"></empty>
		</scroll-view>
	</view>
</template>

<script>
	import evaluateVue from '@/components/evaluate.vue';
	import empty from '@/components/empty.vue'
	import {
		evaList
	} from '@/api/coach.js'
	export default {
		components: {
			evaluateVue,
			empty
		},
		data() {
			return {
				query: {
					form: '',
					satis: 0,
					coach_id: '',
					page: 1
				},
				navList: [
					'全部',
					'非常满意',
					'满意',
					'一般',
					'糟糕',
					'非常差'
				],
				active: 0,
				evaluate: []
			}
		},
		onLoad(e) {
			console.log('e', e);
			if (JSON.stringify(e) !== '{}') {
				this.query.form = e.form
				this.query.course = e.course ? e.course : ''
				this.query.coach_id = e.coach_id ? e.coach_id : ''
				this.getEvaList()
				console.log('query', this.query);
			}
			
		},
		methods: {
			scrolltolower() {
				this.query.page++
				this.getEvaList()
			},
			getEvaList() {
				evaList(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.navList[0] = '全部(' + res.data.satis_0 + ')'
						this.navList[1] = '非常满意(' + res.data.satis_5 + ')'
						this.navList[2] = '满意(' + res.data.satis_4 + ')'
						this.navList[3] = '一般(' + res.data.satis_3 + ')'
						this.navList[4] = '糟糕(' + res.data.satis_2 + ')'
						this.navList[5] = '非常差(' + res.data.satis_1 + ')'
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.evaluate = this.evaluate.concat(res.data.list)
						}

						console.log('list', this.evaluate);
					}
				})
			},
			changeActive(item, index) {
				if (this.active != index) {
					this.status = 'more'
					this.query.page = 1
					this.evaluate = []
					if (!index) {
						this.query.satis = '0'
					} else if (index == 1) {
						this.query.satis = '5'
					} else if (index == 2) {
						this.query.satis = '4'
					} else if (index == 3) {
						this.query.satis = '3'
					} else if (index == 4) {
						this.query.satis = '2'
					} else if (index == 5) {
						this.query.satis = '1'
					}
					this.active = index
					this.getEvaList()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.empty-box {
		display: inline-block;
		width: 40rpx;
		height: 48rpx;
	}

	.evaluate_box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.navbar_box {
			width: 100%;
			height: 106rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);

			.kite-classify-scroll {
				width: 750rpx;
				height: 106rpx;
				overflow: hidden;
				white-space: nowrap;
				padding: 24rpx 0 0 24rpx;

				.item {
					display: inline-block;
					padding: 12rpx 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #999999;
					font-size: 24rpx;
					font-weight: 400;
					margin-right: 12rpx;
				}
			}
		}

		.comlum_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 24rpx;
		}
	}
</style>